<template>
	<view class="card">
		<!-- 课程图片 -->
		<!--    <image :src="video.videoImg" mode="aspectFill" class="course-image"></image>  -->

		<!-- 课程信息 -->
		<view class="course-info">
			<!-- 价格与折扣 -->
			<view class="price-container">
				<text class="new-price">¥{{ video.oldPrice }}</text>
				<view v-if="video.oldPrice" class="discount">
					<text>预付到手¥{{ video.price }}</text>
				</view>
			</view>

			<!-- 课程名称 -->
			<text class="course-name">{{ video.videoName }}</text>
			<br />
			<!-- 课程说明 -->
			<text class="course-remark">{{ video.videoRemake }}</text>
			<br />
			<!-- 特点列表 -->
			<view class="features"> 
				<text class="feature">"高清画质"</text>
				<text class="feature">"名师讲解"</text>
				<text class="feature">"终身学习"</text>
			</view>

			<!-- 教师信息 -->
			<text class="teacher">授课教师：{{ video.teacher.teacherName }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			video() {
				return this.$store.state.videoAbout;
			}
		},
		methods: {
			calculateDiscount(newPrice) {
				// 假设打折后的价格为新价格的十分之一（可根据实际需求修改）
				return (newPrice / 10).toFixed(2);
			}
		}
	};
</script>

<style scoped>
	.card {
		display: flex;
		border: 1px solid #ddd;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	/* .course-image {
  width: 100px;
  height: 100px;
  margin-right: 10px;
} */

	.course-info {
		flex: 1;
		padding: 10px;
	}

	.price-container {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.new-price {
		color: #e60012;
		font-size: 18px;
		font-weight: bold;
		margin-right: 8px;
	}

	.discount {
		background-color: #e60012;
		color: white;
		padding: 2px 6px;
		border-radius: 100px;
		font-size: 12px;
	}

	.course-name {
		font-size: 16px;
		font-weight: bold;
		margin: 5px 0;
	}

	.course-remark {
		font-size: 14px;
		color: #555;
		margin-bottom: 8px;
	}

	.features {
		display: flex;
		flex-wrap: wrap;
		font-size: 12px;
		color: #999;
		margin-bottom: 5px;
	}

	.feature {
		margin-right: 10px;
	}

	.teacher {
		font-size: 12px;
		color: #666;
	}
</style>